<!DOCTYPE html>
<html lang="en">
<!-- cesium 绘制   -->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Hello World!</title>
    <script src="./Build/CesiumUnminified/Cesium.js"></script>
    <style>
        @import url(./templates/bucket.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>
</body>
<script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNWY1NTNiZC0yOWZjLTQxYTEtYmFmZS0zZDhhOWRmMmMyM2YiLCJpZCI6MTM2MDIyLCJpYXQiOjE2ODI2NzE3NjR9.iCrukqqU__ODBrOwYgkTzv2fyg_yAli8GyePHhjgiFc';

    const czml = [
        {
            id: "document",
            name: "CZML Box with Material and Outline",
            version: "1.0",
        }, {
            id: "shape1",
            name: "Blue box",
            position: {
                cartographicDegrees: [104.303854, 24.871046, 0.0],
            },
            box: {
                dimensions: {
                    cartesian: [400.0, 400.0, 400.0],
                },
                material: {
                    solidColor: {
                        color: {
                            rgba: [0, 0, 255, 255],
                        },
                    },
                },
            },
        },
        {
            id: "shape2",
            name: "Red box with black outline",
            position: {
                cartographicDegrees: [104.303854, 24.881046, 0.0],
            },
            box: {
                dimensions: {
                    cartesian: [400.0, 400.0, 400.0],
                },
                material: {
                    solidColor: {
                        color: {
                            rgba: [255, 0, 0, 128],
                        },
                    },
                },
                outline: true,
                outlineColor: {
                    rgba: [0, 0, 0, 255],
                },
            },
        },
        {
            id: "shape3",
            name: "Yellow box with outline",
            position: {
                cartographicDegrees: [104.303854, 24.891046, 0.0],
            },
            box: {
                dimensions: {
                    cartesian: [400.0, 400.0, 400.0],
                },
                fill: false,
                outline: true,
                outlineColor: {
                    rgba: [255, 255, 0, 255],
                }
            }
        }
    ];
    const viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: true,//是否显示图层选择器 
    })

    const dataSourcePromise = Cesium.CzmlDataSource.load(czml);

    viewer.dataSources.add(dataSourcePromise);
    viewer.zoomTo(dataSourcePromise);
</script>

</html>